import React, { useState, useEffect } from 'react';
import { Table, Button } from 'antd';
import SearchList from '@/components/SearchList';
import { EyeFilled } from '@ant-design/icons';
import { transFormIndex } from '@/utils/util';
import { connect, useDispatch } from 'umi';
const NotificationCenter = ({ history, msgData }) => {
  const [pagination, setPagination] = useState({
    showQuickJumper: true,
    total: msgData.total,
  });
  const dispatch = useDispatch();
  const searchList = [
    {
      name: 'title',
      title: '标题',
    },
  ];

  const [params, setParams] = useState({
    pageNo: 1,
    pageSize: 10,
  });
  const initList = (data = {}) => {
    const values = { ...params, ...data };
    dispatch({
      type: 'dict/queryNoticeList',
      payload: values,
    });
  };
  const searchFn = (data) => {
    setParams({
      ...data,
      pageNo: 1,
      pageSize: 10,
    });
  };
  const changeTable = (pagination) => {
    setParams({
      ...params,
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
    });
  };
  const seeMore = (id) => {
    history.push({
      pathname: '/notificationCenter/detail',
      query: { id },
    });
  };
  useEffect(() => {
    initList(params);
    return () => {
      dispatch({
        type: 'dict/saveDict',
        payload: {
          msgData: {
            unRead: 0,
          },
        },
      });
    };
  }, [params]);

  useEffect(() => {
    setPagination({
      ...pagination,
      total: msgData.total,
      current: msgData.current,
      pageSize: msgData.pageSize,
    });
  }, [msgData]);
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      render: (text, r, index) => transFormIndex(pagination, index),
    },
    {
      title: '标题',
      dataIndex: 'title',
      align: 'center',
      render: (t, r) =>
        r.state === 0 ? <a onClick={seeMore.bind(null, r.id)}>{t}</a> : t,
    },
    {
      title: '发起人',
      dataIndex: 'sendUser',
      align: 'center',
    },
    {
      title: '时间',
      dataIndex: 'updateTime',
      aling: 'center',
      render: (text, r, index) => text.split(' ').shift(),
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align: 'center',
      render: (t, r) => {
        return (
          <div>
            <Button
              type="link"
              icon={<EyeFilled />}
              className="table-icon"
              onClick={seeMore.bind(null, r.id)}
            ></Button>
          </div>
        );
      },
    },
  ];

  return (
    <>
      <SearchList searchList={searchList} initList={searchFn}></SearchList>
      <div className="bgf main-x">
        <Table
          columns={columns}
          rowKey="id"
          dataSource={msgData.list}
          onChange={changeTable}
          className="custom-table"
          pagination={pagination}
        ></Table>
      </div>
    </>
  );
};
export default connect(({ dict }) => ({
  msgData: dict.msgData,
}))(NotificationCenter);
